/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import url("./spectrum-dialog.css");
@import url("./dialog-overrides.css");

:host {
    --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color);
}

.content {
    overflow: hidden;
}

.footer {
    color: var(--spectrum-dialog-confirm-description-text-color, var(--spectrum-gray-800));
}

.type-icon {
    grid-area: typeIcon;
    color: var(--mod-alert-dialog-error-icon-color, var(--swc-alert-dialog-error-icon-color));
}

.content[tabindex] {
    overflow: auto;
}

::slotted(img[slot="hero"]) {
    width: 100%;
    height: auto;
}

/* We may remove this override when CSS fixes unused `header` and `typeIcon` areas */
.grid {
    grid-template-areas:
        "hero hero hero hero hero hero"
        ". . . . . ."
        ". heading heading heading typeIcon . "
        ". divider divider divider divider ."
        ". content content content content ."
        ". footer footer buttonGroup buttonGroup ."
        ". . . . . .";
    inline-size: 100%;
    display: grid;
}

/* Needed while `error` attribute still exists as deprecated */
:host(:not([error], [dismissable], [mode])) .grid {
    grid-template-areas:
        "hero hero hero hero hero hero"
        ". . . . . ."
        ". heading heading heading heading . "
        ". divider divider divider divider ."
        ". content content content content ."
        ". footer footer buttonGroup buttonGroup ."
        ". . . . . .";
    inline-size: 100%;
    display: grid;
}
